/* eslint-disable @typescript-eslint/no-unused-vars */
// 数据源筛选
import React, { useEffect, useState }  from 'react';
import {
	message,
	Modal,
} from 'antd';
// import FilterFieldString from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/components/FilterFieldString';
// import FilterFieldDate from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/components/FilterFieldDate';
// import FilterFieldMeasure from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/components/FilterFieldMeasure';
import FilterFieldString from './FilterFieldString';
import FilterFieldDate from './FilterFieldDate';
import FilterFieldMeasure from './FilterFieldMeasure';

import { DATE_TYPES } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
const STR_TYPES = [ 'TEXT' ];
const NUM_TYPES = [ 'INTEGER', 'FLOAT' ];

interface Iprops {
	modalVisible: any;
	curField: any;
	sourceId: string;
	tableName: string;
	conditions: any;
	toggleFilterModal: Function;
	handleCondition: Function;
}

// eslint-disable-next-line react/display-name
const FilterField = ( props: Iprops ) => {
	const { modalVisible, curField, sourceId, tableName, conditions } = props;
	const [ curConditions, setCurConditions ] = useState( [] );

	//	字符串-列表
	const [ dimensionStringList, setDimensionStringList ] = useState( [] );

	//	日期
	const [ dimensionDate, setDimensionDate ] = useState( [] );

	//	度量
	const [ measure, setMeasure ] = useState( [] );

	//	初始化变量
	const initVar = () => {
		setDimensionStringList( [] );
		setDimensionDate( [] );
		setMeasure( [] );
		setCurConditions( [] );
	};

	const handleCancle = () => {
		props.toggleFilterModal( false );
		initVar();
	};
	
	
	const handleOk = () => {
		const conditions = [ ...dimensionStringList, ...dimensionDate, ...measure ];
		props.handleCondition( conditions );
		handleCancle();
	};

	useEffect( () => {
		if ( !modalVisible ) return;
		let fields = conditions.map( o => o.field );
		if ( ~fields.indexOf( curField.name ) ) {
			let curConds = conditions.map( item => {
				return item.field === curField.name ? item : null;
			} ).filter( item => item !== null );
			setCurConditions( curConds );
		}
	}, [ modalVisible, curField, conditions ] );

	return (
		<Modal className='filter_field_modal'
			okText={'确定'} 
			visible={ modalVisible }
			cancelText={'取消'} 
			onCancel={handleCancle}
			onOk={handleOk}
			title={'数据源筛选'}>
			<p>已选择的字段：{ curField.desc }</p>
			{
				STR_TYPES.includes( curField.type.toUpperCase() ) && (
					<FilterFieldString
						field={ curField }
						sourceId={ sourceId }
						tableName={ tableName }
						conditions={ curConditions }
						setDimensionStringList={ setDimensionStringList }
					></FilterFieldString>
				)
			}
			{
				DATE_TYPES.includes( curField.type.toUpperCase() ) && (
					<FilterFieldDate
						field={ curField } 
						conditions={ curConditions } 
						setDimensionDate={ setDimensionDate }
					></FilterFieldDate>
				)
			}
			{
				NUM_TYPES.includes( curField.type.toUpperCase() ) && (
					<FilterFieldMeasure 
						field={ curField } 
						conditions={ curConditions } 
						setMeasure={ setMeasure }
					></FilterFieldMeasure>
				)
			}
		</Modal>
	);
};

export default FilterField;
